<template>
	<view class="page">
		<topVue title="用户案例" :isBack="true"></topVue>
		<view class="main-content">
			<scroll-view class="content" scroll-y @scrolltolower="scrolltolower">
				<view class="box flex-wrap flex-between">
					<view class="w100 flex-column align-center padding-column20" v-if="isEmpty">
						<image src="../../static/empty.png" style="width: 256rpx; height: 256rpx;"></image>
						<text style="color: #81868e;">AI视频作品为空</text>
					</view>
					<view class="boxLi relative" v-for="(item, index) in userCase" :key="index">
						<view class="videoVue relative">
							<image src="../../static/play.png" style="width: 60rpx; height: 60rpx;z-index: 99;" class="absolute-auto" @click="playVideo(item.videoUrl)"></image>
							<image :src="item.videoUrl+'?x-oss-process=video/snapshot,t_1,f_jpg,w_310,m_fast,ar_auto'" style="width: 100%; max-height: 100%; border-radius: 12rpx;" mode="widthFix"></image>
						</view>
						<view class="botVue line-1">{{ item.name }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 播放视频 -->
		<myVideo ref="myVideo" v-show="isPlay" @quit="isPlay = false"></myVideo>
	</view>
</template>

<script>
	import myVideo from "@/components/myVideo.vue"
	export default {
		components: {
			myVideo
		},
		data(){
			return {
				userCase: [],
				pageNum: 0,
				pageSize: 10,
				isLastPage: false,
				isEmpty: false,
				isPlay: false
			}
		},
		async onLoad() {
			await this.getUserCase()
		},
		methods: {
			playVideo(videoUrl){
				this.isPlay = true
				this.$refs.myVideo.videoPlay(videoUrl)
			},
			// 获取用户案例
			async getUserCase(){
				const res = await this.$request("/shuziren/userVideo/public", {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, "GET")
				if(res.code===200) {
					this.userCase = this.userCase.concat(res.data.content)
					this.isEmpty = this.userCase.length===0
					this.isLastPage = res.data.page.number == res.data.page.totalPages - 1
					console.log("是否有下一页", this.isLastPage)
				}
			},
			scrolltolower(){
				console.log("ppp", this.isLastPage)
				if(this.isLastPage) return
				this.pageNum ++
				this.getUserCase()
			},
		}
	}
</script>

<style lang="less" scoped>
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 92rpx);
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #10B981, #3B82F6);
		.content {
			width: 100%;
			height: 100%;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.boxLi {
				width: 310rpx;
				height: 500rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				.videoVue {
					width: 310rpx;
					height: 440rpx;
				}
				.botVue {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 26rpx;
					border-radius: 0 0 12rpx 12rpx;
				}
			}
		}
	}
</style>